<template>
    <ProTable
        ref="proTableRef"
        :loading="table.isRefresh"
        controllerUrl="role"
        :data="table.data"
        :page="table.page"
        :columns="columns"
        :headerActionTypes="['add', 'export', 'delete', 'batchDelete', 'search', 'dynamicQuery']"
        :columnActionTypes="['assign', 'edit', 'delete']"
        :queryFormItems="queryFormItems"
        :dynamicQuery="table.dynamicQuery"
        @onTableAction="onTableAction"
    >
        <template #form>
            <RoleForm ref="formRef" @onTableAction="onTableAction"></RoleForm>
            <AssignPermissionsForm ref="assignFormRef" :getDataApi="getAllMenus" @onTableAction="onTableAction"></AssignPermissionsForm>
        </template>
    </ProTable>
</template>

<script setup lang="tsx">
import { RoleType } from '@/api/auth/role/types'
import { QueryFormItem } from '@/types/queryform'

const { table, formRef, assignFormRef, proTableRef, onTableAction } = useTable({ api: new ProTableApi('role'), isPage: true })

const columns = reactive<Array<TableColumnType<RoleType>>>([
    {
        type: 'selection',
        align: 'center',
    },
    {
        type: 'index',
        label: '序号',
        align: 'center',
        width: '80',
    },
    {
        prop: 'name',
        label: '名称',
        align: 'center',
    },
    {
        prop: 'identifying',
        label: '标识',
        align: 'center',
    },
    {
        prop: 'description',
        label: '描述',
        align: 'center',
    },
    {
        prop: 'isEnabled',
        label: '状态',
        align: 'center',
        width: '90',
        component: (scope: any) => {
            const onChange = async () => {
                await onTableAction('enabled', { id: scope.row.id, message: scope.row.isEnabled ? '禁用' : '启用' })
            }
            return <el-switch inline-prompt active-text="启用" inactive-text="禁用" onChange={onChange} model-value={scope.row.isEnabled}></el-switch>
        },
    },
    {
        type: 'datetime',
        prop: 'createDateTime',
        default: 'YYYY-MM-DD HH:mm:ss',
        label: '创建时间',
        align: 'center',
        width: '200',
    },
])
const queryFormItems = reactive<Array<QueryFormItem<RoleType>>>([
    {
        type: 'number',
        label: 'ID',
        name: 'id',
        placeholder: '角色ID',
    },
    {
        label: '名称',
        name: 'name',
        placeholder: '模糊查询',
    },
    {
        label: '标识',
        name: 'identifying',
        placeholder: '模糊查询',
    },
    {
        type: 'boole',
        label: '是否启用',
        name: 'isEnabled',
    },
    {
        type: 'select',
        label: '排序字段',
        sort: 'Sort',
        options: (): SelectOptions[] => {
            const options: SelectOptions[] = []
            columns.forEach((item) => {
                if (item.prop && item.label) {
                    options.push({ label: item.label, value: item.prop })
                }
            })
            return options
        },
    },
    {
        type: 'boole',
        label: '顺序',
        sort: 'Order',
        options: (): SelectOptions[] => [
            { label: '顺序', value: true },
            { label: '倒序', value: false },
        ],
    },
    {
        type: 'datetime',
        label: '创建时间',
        name: 'createDateTime',
        dateType: 'datetimerange',
    },
    {
        type: 'datetime',
        label: '更新时间',
        name: 'lastUpdateDateTime',
        dateType: 'datetimerange',
    },
])
</script>

<style lang="scss" scoped></style>
